<template>
	<view class="view-modal" v-if="showSheetView" :class="[modalAnimation?'ani_start':'ani_end']">
		<view class="sheet-view" :class="[modalAnimation?'ani-top':'ani-btm']">
			<view class="head-view">
				<view class="cancel-view" @click="cancelAction">
					<text style="color: #FF8535;">取消</text>
					<text class="clear">清空</text>
				</view>
				<view class="title-view">
					<text>{{sheetTitle}}</text>
				</view>
				<view class="ok-view" @click="okAction">
					<text>确认</text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="cell-row"
					:class="[alignment==='left'?'align-left':alignment==='right'?'align-right':'',index===selectIndex?'row-hilight':'']"
					v-for="(item,index) in dataList" :key="index" @click="didSelectedRow(index)">
					<!-- <image class="cell-icon" :src="item[`${iconKey}`]"></image> -->
					<text class="cell-label"
						:class="[index===selectIndex?'hilight-label':'']">{{item[`${titleKey}`]}}</text>
					<!-- <image v-if="displayCheckedIcon && index===selectIndex" class="cell-check-icon"
						:src="'data:image/png;base64,' + checkIconData"></image> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewTitle: null,
				selectIndex: 0,
				dataList: [],
				modalAnimation: false,
				checkIconData: ''
			};
		},
		props: {
			showSheetView: {
				type: Boolean,
				default: false
			},
			optionsList: {
				type: Array,
				default: []
			},
			titleKey: {
				type: String,
				default: ""
			},
			iconKey: {
				type: String,
				default: ""
			},
			defaultIndex: {
				type: Number,
				default: 0
			},
			sheetTitle: {
				type: String,
				default: "请选择"
			},
			alignment: {
				type: String,
				default: "center"
			},
			displayCheckedIcon: {
				type: Boolean,
				default: false
			},
		},
		created() {
			this.viewTitle = this.sheetTitle
			this.selectIndex = this.defaultIndex
			this.dataList = this.optionsList
			
			let icon = 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAchJREFUeF7tmUFywjAMReXQi+QkDceCLgqLwrHgJrkIE3fClA5DE5AcyZJrsXZivecvOwkBKv+FyvnBBXgCKjfgLVB5AHwT9BbwFqjcgLdA5QHwU8BbwFugcgP/ogWar34HAT4jwHkVYH/ZtGfsuhYvIBz6UwDo7oGHbYvmQg/EGs05bgp+nL8JsMamoFgBc/BVCHgGDxH2w0e7wyaxuARwwo+SihLADV+UAAn4YgRIwRchQBKeLODt2HfY8xW7Cz8bJw2PFjCCDxFOv8USj5oUGTng0QImixGUkAseLaA59HFyFQUk5ITHC/h525KWkBseLeA6cOKti3NPkL7/3D5EehKUKlLqvpjNlyRAIgma8KQWuLfJVTTXfTArzdICnBIswCcn4CYiFSL1uiUrzZ6AVAmW4BcngCrBGjybAMzpEAO8P3695XyOSG0P8jGY/PY2d6HA4zRFBquAl0l4rEwZnrUF0EfkbaABeDEBL5NgBF5UwKwEQ/DiAv5IMAafRcA4yfWT2gAd5R8byk6+ZCz7KbCkGI1rXYCGdUtzegIsrYZGLZ4ADeuW5vQEWFoNjVo8ARrWLc3pCbC0Ghq1eAI0rFuas/oEfAN/0AhQ3IEvrwAAAABJRU5ErkJggg=='
			
			this.checkIconData = icon.replace(/[\r\n]/g, "");
		},
		computed: {
		},
		watch: {
			showSheetView: {
				handler: function(flag) {
					this.modalAnimation = flag
				},
				immediate: true
			}
		},
		methods: {
			cancelAction: function() {
				this.modalAnimation = false
				let self = this
				setTimeout(() => {
					// self.showSheetView = false
					self.$emit('onSelected', {
						'cancel': true
					})
				}, 350);
			},
			okAction: function() {
				this.modalAnimation = false
				let data = this.dataList[this.selectIndex]
				let self = this
				setTimeout(() => {
					// self.showSheetView = false
					self.$emit('onSelected', {
						data: data,
						'cancel': false,
						'confirm': true
					})
				}, 350);
			},
			didSelectedRow(row) {
				this.selectIndex = row
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		width: 100%;
		height: 540upx;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
	}

	.cell-row {
		width: 100%;
		height: 88upx;
		// border-bottom: 1px solid #eee;
		padding: 0upx 20upx;

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.cell-icon {
		width: 40upx;
		height: 40upx;
	}
	
	.cell-check-icon
	{
		position: absolute;
		right: 30upx;
		width: 40upx;
		height: 40upx;
	}

	.cell-label {
		padding-left: 6upx;
		// font-size: 16px;
		color: #333333;
		font-family: 苹方-简;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 38rpx;
		text-align: center;
		letter-spacing: 0px;
		
		color: #3D3D3D;
	}
	.row-hilight{
		border-radius: 10px;
		
		/* 点缀色 */
		background: #fff3eb;
	}

	.hilight-label {
		color: #000000;
		opacity: 1;
		// border-radius: 10px;
		// opacity: 0.1;
		
		// /* 点缀色 */
		// background: #FF8535;
	}

	.align-left {
		justify-content: flex-start;
	}

	.align-right {
		justify-content: flex-end;
	}

	.ani_start {
		animation: animationShow 0.4s;
	}

	.ani_end {
		animation: animationHide 0.4s;
	}

	@keyframes animationShow {
		from {
			background-color: rgba(0, 0, 0, 0);
			opacity: 0;
		}

		to {
			background-color: rgba(0, 0, 0, 0.2);
			opacity: 1;
		}
	}

	@keyframes animationHide {
		from {
			background-color: rgba(0, 0, 0, 0.2);
			opacity: 1;
		}

		to {
			background-color: rgba(0, 0, 0, 0);
			opacity: 0;
		}
	}
	
	@keyframes slideBottom {
	    0% {
	        transform: translateY(100%)
	    }
	
	    100% {
	        transform: translateY(0)
	    }
	}
	

	.view-modal {
		position: fixed;
		top:0;
		// top: calc(var(--status-bar-height) + 44px);
		// bottom: 0;
		height: calc(100% - var(--status-bar-height) - 0px);
		width: 100%;
		z-index: 1;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.ani-btm {
		transform: translateY(540upx);
	}

	.ani-top {
		// animation: slideBottom 0.4s;
	}


	.sheet-view {
		position: absolute;
		bottom: 0upx;
		height: 540upx;
		width: 100%;
		transition: all 0.25s;
		background-color: white;
		border-radius: 16px 16px 0px 0px;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.head-view {
		position: relative;
		width: calc(100% - 70upx);
		height: 100upx;
		padding:40rpx 0 ;
		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box
	}

	.cancel-view {
		position: relative;
		width: 124upx;
		height: 100%;

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		text {
			position: relative;
			width: 100%;
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 38rpx;
			text-align: center;
			letter-spacing: 0px;
			
			font-variation-settings: "opsz" auto;
			text-align: left;
			
		}
		
		.clear{
			position: absolute;
			left: 90rpx;
		}
	}

	.title-view {
		position: relative;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			position: relative;
			width: 100%;
			font-size: 30upx;
			color: #999999;

			text-align: left;
		}
	}

	.ok-view {
		position: relative;
		width: 124upx;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			position: relative;
			width: 100%;
			font-size: 28upx;
			color: #FF8535;

			text-align: right;
		}
	}

	.mid-view {
		position: relative;
		width: 100%;
		height: 106upx;

		border-bottom: 1upx solid rgb(235, 235, 235);
		border-top: 1upx solid rgb(235, 235, 235);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn-view {
		position: relative;
		width: 50%;
		height: 100%;

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tt-view {
		position: relative;
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.normal-text {
		position: relative;
		width: 100%;
		font-size: 32upx;
		color: #555555;
		text-align: center;
	}

	.hili-text {
		position: relative;
		width: 100%;
		font-size: 32upx;
		color: #FF8535;
		text-align: center;
	}

	.active {
		background-color: white;
	}

	.non-active {
		background-color: rgb(245, 245, 245);
	}
</style>